<template>
	<view>
		<view class="tx_header">
			<text>提现：￥{{balance}}</text>
			<text class="red_font" @click="withdrawal">全部提现</text>
		</view>
		<view class="tx_info">
			<view class="input-money">
				<text class="t">提出金额(元)(当前只支持整数提现)</text>
				<view class="input-num">
					<text>￥</text>
					<input type="number" v-model="withdrawalReqVo.withDrawalMoney" placeholder="请输入提现金额"/>
				</view>
			</view>
			<view class="tixian-t">提现方式</view>
			<view class="tixian-type" @click="changeType(0)">
				<text>ZFB</text>
				<img src="../../static/tixian_gou.png" v-if="withdrawalReqVo.withDrawalWay==0" />
			</view>
			<view class="tixian-type" @click="changeType(1)">
				<text>WX</text>
				<img src="../../static/tixian_gou.png" v-if="withdrawalReqVo.withDrawalWay==1" />
			</view>
			<view class="tixian-type" @click="changeType(2)">
				<text>THK</text>
				<img src="../../static/tixian_gou.png" v-if="withdrawalReqVo.withDrawalWay==2" />
			</view>
			<view class="login-pwd">
				<text>登录密码</text>
				<input type="password" v-model="withdrawalReqVo.password" placeholder="请输入登录密码" />
			</view>
		</view>

		<button class="tx_btn" @click="sureWithDrawal">确认提现</button>

	</view>
</template>

<script>
	import {
		getBalance,
		postWithDraw
	} from '@/request/api/withDraw.js'
	export default {
		name: 'withDraw',
		data() {
			return {
				balance: '0.00', //可以提现的余额
				withdrawalReqVo: {
					withDrawalMoney: '', //输入的可以提现的金额，
					withDrawalWay: 0, //0: 支付宝收款,1:微信收款;2:银行卡收款
					password: '', //登录密码
				}
			}
		},
		mounted() {
			this.getBalanceInfo()
		},
		methods: {
			//获取可以提现的金额
			async getBalanceInfo() {
				const res = await getBalance()
				this.balance = res.data
			},
			//全部提现填写金额操作
			withdrawal() {
				this.withdrawalReqVo.withDrawalMoney = this.balance
			},
			//修改提现方式
			changeType(type) {
				this.withdrawalReqVo.withDrawalWay = type
			},
			//提现
			sureWithDrawal() {
				postWithDraw(this.withdrawalReqVo).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: '提现成功'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.tx_header {
		height: 50px;
		background: #fff;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		display: flex;
		flex-direction: row;
	}

	.tx_header text {
		font-size: 15px;
		font-weight: 500;
		color: #000;
		line-height: 23px;
	}

	.tx_info {
		height: 342px;
		margin-top: 10px;
		background-color: #fff;
		padding-bottom: 10px;
		display: flex;
		flex-direction: column;
	}

	.tx_info .input-money {
		margin: 10px 15px 0 15px;
		height: 115px;
		background: hsla(0, 0%, 84.7%, 0);
		border: 1px solid #f2f2f2;
		padding: 15px;
		display: flex;
		flex-direction: column;
	}

	.tx_info .input-money .t {
		font-size: 15px;
		font-weight: 400;
		color: #666;
		line-height: 23px;
	}


	.tx_info .input-money .input-num {
		margin-top: 25px;
		align-items: center;
		padding-bottom: 10px;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		flex-direction: row;
	}

	.tx_info .input-money .input-num text {
		font-size: 22px;
		font-weight: 400;
		color: #333;
		line-height: 33px;
	}

	.tx_info .tixian-t {
		margin: 0 15px;
		height: 40px;
		align-items: center;
		border-bottom: 1px solid #eee;
		font-size: 15px;
		font-weight: 400;
		color: #999;
		line-height: 23px;
	}

	.tx_info .tixian-type,
	.tx_info .login-pwd {
		margin: 0 15px;
		height: 43px;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		display: flex;
		flex-direction: row;
	}

	.tx_info .login-pwd {
		border-bottom: none;
	}

	.tx_info .tixian-type img {
		width: 20px;
		height: 20px;
	}

	.tx_info .tixian-type text {
		font-size: 15px;
		font-weight: 400;
		color: #333;
		line-height: 23px;
	}

	.tx_btn {
		margin: 20px 15px;
		height: 46px;
		border-radius: 8px;
		background-image: linear-gradient(90deg, #2c7fd9, #4fa1f3);
		font-size: 18px;
		font-weight: 400;
		color: #fff;
		line-height: 27px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tx_header .red_font {
		color: #fc4141;
	}
</style>